<template>
  <div>
    <h1 style="text-align: center">文本检测</h1>
    <div style="display: flex;">
      <div style="flex: 10;padding: 0 10px;">
        <editor v-model="filterText" :min-height="192"/>
      </div>
      <div style="text-align: center;flex: 1;margin: 200px 20px auto 20px">
        <el-button type="primary" @click="submitForm" style="margin: 10px 0">检 测</el-button>
        <el-button @click="cancel" style="margin: 10px 0">重 置</el-button>
      </div>
      <div style="flex: 10;margin: 0 10px;border: 1px solid #dcdfe6;height: 500px;overflow: scroll">
        <div v-html="resultHtml" style="padding: 10px"></div>
      </div>
    </div>



  </div>
</template>

<script>
  import { addTextfilter } from "@/api/filter/textfilter";
  import Editor from "../../../components/Editor/index";
  import {Message} from "element-ui";
    export default {
      name: "Text",
      components: {Editor},
      data(){
          return{
            resultHtml: '',
            filterText: '',
          }
      },
      methods: {
        /** 提交按钮 */
        submitForm() {
            if (this.filterText===''||this.filterText==='<p><br></p>') {
              Message({
                message: '请输入文本检测内容',
                type: 'warning'
              })
            }else{
              addTextfilter({filterText:this.filterText}).then(response => {
                this.resultHtml = response.msg;
              });
            }
        },
        // 表单重置
        reset() {
          this.form = {
            filterText: null,
          };
          this.resetForm("form");
          this.resultHtml = ''
        },
        // 取消按钮
        cancel() {
          this.reset();
        },
      }
    }
</script>

<style scoped>

</style>
